<!--
 * @FilePath: DetaileModule.vue
 * @Author: jack
 * @Date: 2025-02-20 16:37:45
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-09-29 15:24:15
 * Copyright: 2025 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="detaileModule">
        <div class="drawerTop">
            <div class="leftBox">
                <PreviewModule :editInfo="props.editInfo.info" :attachs="props.editInfo.attachs"></PreviewModule>
            </div>
            <div class="rightBox" v-if="!props.isPreview">
                <div class="title">
                    内容详情
                </div>
                <div class="infoContent">
                    <el-form label-width="100px" size="default" :model="editForm" ref="editFormRef">
                        <el-form-item label="模块分类">
                            <div>{{ editInfo.info.module_name }}</div>
                        </el-form-item>
                        <el-form-item label="所属分类">
                            <div>{{ editInfo.info.category_name?editInfo.info.category_name:'-' }}</div>
                        </el-form-item>
                        <el-form-item label="文章类型">
                            <el-tag effect="dark" style="margin-right: 5px;" type="primary">{{
                                Number(editInfo.info.news_type) == 1 ? '集团公告' :
                                '学校新闻'
                                }}</el-tag>
                        </el-form-item>
                        <el-form-item label="文章标签" v-if="editInfo.tags && editInfo.tags.length > 0">
                            <el-tag v-for="item in editInfo.tags ? editInfo.tags.split(',') : []"
                                style="margin-right: 5px;" effect="dark" type="primary">{{ item }}</el-tag>
                        </el-form-item>
                        <el-form-item label="是否置顶">
                            <el-tag :type="Number(editInfo.info.is_top) == 1 ? 'success' : 'info'">{{
                                Number(editInfo.info.is_top) == 1 ? '是' : '否' }}</el-tag>
                        </el-form-item>
                        <!-- <el-form-item label="允许评论" prop="allow_comment">
                            <el-tag :type="Number(editInfo.info.allow_comment) == 1 ? 'success' : 'info'">{{
                                Number(editInfo.info.allow_comment) == 1 ? '是' : '否' }}</el-tag>
                        </el-form-item> -->
                        <el-form-item label="允许下载">
                            <el-tag :type="Number(editInfo.info.allow_download) == 1 ? 'success' : 'info'">{{
                                Number(editInfo.info.allow_download) == 1 ? '是' : '否' }}</el-tag>
                        </el-form-item>
                        <!-- <el-form-item label="文章封面">
                            <div class="uploadList">
                                <div class="items" @mouseenter="mouserIndex = 1" @mouseleave="mouserIndex = -1">
                                    <el-image :src="editInfo.info.cover" fit="cover"
                                        style="width: 100%;height: 100%;"></el-image>
                                    <transition name="fade" mode="out-in">
                                        <div class="model-img-box" v-if="mouserIndex == 1">
                                            <div class="mine-flex-box">
                                                <el-icon @click="showImage">
                                                    <View />
                                                </el-icon>
                                            </div>
                                        </div>
                                    </transition>
                                </div>
                            </div>
                        </el-form-item> -->
                        <el-form-item label="创建人">
                            <div>{{ editInfo.info.creator_name ? editInfo.info.creator_name : '-' }}</div>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <div>{{ editInfo.info.create_date ? editInfo.info.create_date : '-' }}</div>
                        </el-form-item>
                        <el-form-item label="发布人">
                            <div>{{ editInfo.info.publisher_name ? editInfo.info.publisher_name : '-' }}</div>
                        </el-form-item>
                        <el-form-item label="发布状态">
                            <el-tag :type="Number(editInfo.info.up_down) == 1 ? 'success' : 'info'">{{
                                Number(editInfo.info.up_down) == 1 ? '已发布' : '未发布' }}</el-tag>
                        </el-form-item>
                        <el-form-item label="发布时间">
                            <div>{{ editInfo.info.publish_date ? editInfo.info.publish_date : '-' }}</div>
                        </el-form-item>
                        <el-form-item label="上线时间">
                            <div>{{ editInfo.info.show_time ? editInfo.info.show_time : '-' }}</div>
                        </el-form-item>
                        <el-form-item label="过期时间">
                            <div>{{ editInfo.info.expire ? editInfo.info.expire : '-' }}</div>
                        </el-form-item>
                        <!-- <el-form-item label="审核状态">
                            <el-tag type="success">待审核</el-tag>
                        </el-form-item>
                        <el-form-item label="审核人">
                            <div>{{ editInfo.info.checkuser_name ? editInfo.info.checkuser_name : '-' }}</div>
                        </el-form-item>
                        <el-form-item label="审核时间">
                           <div>{{ editInfo.info.checkuser_name ? editInfo.info.checkuser_name : '-' }}</div>
                        </el-form-item> -->
                        <el-form-item label="编辑者">
                            <div>{{ editInfo.info.editor_name ? editInfo.info.editor_name : '-' }}</div>
                        </el-form-item>
                        <el-form-item label="更新时间">
                            <div>{{ editInfo.info.edit_date ? editInfo.info.edit_date : '-' }}</div>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <div class="fixed-btn-box2">
                    <el-button type="primary">发布/通过</el-button>
                    <el-button type="danger" plain class="white-bg-btn">驳回</el-button>
                </div> -->
            </div>
        </div>
        <!-- 查看图片 -->
        <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="srcList"></el-image-viewer>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, h, onMounted, reactive, watch } from 'vue'
import PreviewModule from './PreviewModule.vue'
interface PropsType {
    detailDialogVisible: boolean
    editInfo?: any
    isPreview?: boolean // 是否预览
}
const props = withDefaults(defineProps<PropsType>(), {
    detailDialogVisible: false,
    schoolList: [],
    isPreview: false
})
interface EmitType {
    // (e: 'modelCancel'): void
    // (e: 'getList'): void
}
const emit = defineEmits<EmitType>()
const editForm = reactive<any>({})
// 查看图片
const mouserIndex = ref(0)
const srcList = ref<any>([])
const showViewer = ref(false)// 显示查看器
const showImage = () => {
    srcList.value = []
    srcList.value.push(props.editInfo.info.cover)
    showViewer.value = true
}
const closeViewer = () => {
    showViewer.value = false
}
onMounted(() => { })
</script>
<style lang="scss" scoped>
.detaileModule {
    height: 100%;

    .drawerTop {
        height: 100%;
        display: flex;

        .leftBox {
            flex: 2;
            height: 100%;
                overflow: scroll;
            }
            
            .rightBox {
                flex: 1;
                height: 100%;
                border-left: 24px solid #F5F5F5;
                position: relative;
            
                .title {
                    height: 48px;
                    line-height: 48px;
                    padding: 0 20px;
                    border-bottom: 1px solid #E4E4E4;
                    font-weight: bold;
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 15px;
                }
            
                .infoContent {
                    height: calc(100% - 75px);
                    overflow-y: scroll;
            
                    .uploadList {
                        display: flex;
                        flex-flow: wrap;
                    width: 100%;

                    .items {
                        width: 120px;
                        height: 72px;
                        background: #EEEEEE;
                        display: inline-block;
                        margin: 0 20px 0 0;
                        border-radius: 4px;
                        border: 1px dashed #DCDCDC;
                        position: relative;
                        padding: 6px;
                        box-sizing: border-box;

                        .el-image {
                            border-radius: 4px;
                            background: #ffffff
                        }

                        .model-img-box {
                            background: rgba(0, 0, 0, 0.5);
                            width: 100%;
                            height: 72px;
                            position: absolute;
                            cursor: pointer;
                            top: 0;
                            left: 0;
                            border-radius: 4px;
                            z-index: 9;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #fff;

                            i {
                                color: #fff;
                                font-size: 16px;
                            }

                            .mine-flex-box {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .el-icon {
                                    transition: all 1s;
                                    font-weight: bold;
                                }

                                span {
                                    width: 1px;
                                    margin: 0 7px;
                                    height: 12px;
                                    background: rgba(255, 255, 255, 0.9);
                                    display: inline-block;
                                }

                                .el-icon:first-of-type:hover {
                                    transform: scale(1.2);
                                }

                                .el-icon:last-of-type:hover {
                                    transform: scale(1.2);
                                }
                            }
                        }
                    }
                }
            }

            .fixed-btn-box2 {
                border-top: 1px solid #DCDFE6;

                .el-button {
                    margin-top: 15px;
                    margin-right: 15px;
                    float: right;
                }
            }
        }

    }

    :deep(.el-drawer) {
        width: 70% !important;
        min-width: 1060px !important;
    }

    :deep(.el-form-item__label) {
        color: #666666;
    }

    :deep(.el-form-item--default) {
        margin-bottom: 10px;

        div {
            // font-weight: bold;
            font-size: 14px;
            color: #333333;
        }
    }
}
</style>